const Layout = {
    addLayout() {
        $("body").append(`<div id="xi_gua_shielder"></div>`);
        $("#xi_gua_shielder").append(`<div id="home_layout" v-show="show">
  <ul style="display: flex;justify-content: space-around;padding-top: 10px;" id="tabUl">
    <li><button value="ruleCRUDLayout">规则增删改查-信息-备份与恢复(导出与导入)</button></li>
    <li><button value="donateLayout">支持打赏作者</button></li>
  </ul>
<div>
    <div class="tab active" id="ruleCRUDLayout"></div>
    <div class="tab" id="donateLayout">打赏作者</div>
</div>

</div>`);
        Util.addStyle(`
#home_layout {
    background: rgb(20,22,23);
    top:0;
    margin: 0px;
    height: 100%;
    width: 100%;
    max-height: 100%;
    position: fixed;
    z-index: 2024;
    overflow-y: auto;
    border: 3px solid green;
}
.tab {
display: none;
}
.tab.active {
display: block;
}

        `);
        LayoutVue.returnVue();
        $("#ruleCRUDLayout").append(`
            <div>
            <div style="display: flex;flex-wrap: wrap;">
    <div>
    <div>
    <h2>规则增删改查</h2>
    <select v-model="model">
    <option v-for="(item,key) in modelList" v-bind:value="key">{{item}}</option>
    </select>      
    <select v-model="defaultSelect">
    <option v-for="(item,key) in ruleKeyList" v-bind:value="key">{{item.name}}</option>
    </select> 
    <div>
    <textarea style="width: 40%; height: 100px;"v-show="isBatchShow" v-model.trim="ruleEditBox"></textarea>
    </div>  
            <div>
              <button @click="add" v-show="isSingleShow">增加指定规则</button>
              <button @click="addAll" v-show="isBatchShow">批量增加规则</button>
              <button @click="delItem" v-show="isBatchShow">删除下拉框选中的规则</button>
              <button @click="delKey" v-show="isSingleShow">删除指定规则</button>
              <button @click="delAll" v-show="isBatchShow">删除所有规则</button>
              <button @click="setKey" v-show="isSingleShow">修改</button>
              <button @click="findKey" v-show="isSingleShow">查询</button>
              <button @click="lookLocalRUleContent">查看本地下拉框中所有的规则内容</button>
              <button @click="lookLocalAppointRUleContent">查看下拉框中指定的规则内容</button>
            </div>
            <hr>
            <h3>测试规则</h3>
            <button><a href="https://www.mikuchase.ltd/web/#/rule_tool" target="_blank">规则验证工具</a></button>
          </div>
          <hr>
         <h2>使用说明</h2>
         <ol>
         <li>
         <pre style="white-space: pre-wrap">脚本中会对要匹配的内容进行去除空格和转成小写，比如有个内容是【不 要  笑   挑  战  ChallEnGE】，会被识别称为【不要笑挑战challenge】</pre>
         </li>
         <li>在上述一点的情况下，模糊匹配和正则匹配的方式时不用考虑要匹配的内容中大写问题</li>
         <li>如果用户要添加自己的正则匹配相关的规则时，建议先去该网址进行测试再添加，避免浪费时间【<a href="https://c.runoob.com/front-end/854/" target="_blank" title="正则表达式在线测试 | 菜鸟工具">https://c.runoob.com/front-end/854/正则表达式在线测试|菜鸟工具</a>】</li>
         <li>如需要备份自己的规则可以考虑在当前选项卡下的【规则导入导出】中选择你要导出的方式，【全部规则到文件】、【全部规则到剪贴板】、【全部UID规则到文件】和【全部规则到云端账号】，如您需要备份在云端服务器上请选择【全部规则到云端账号】</li>
         </ol>
         </div>
         <div>
         <h2>规则信息</h2>
         <p v-for="(item,key) in ruleKeyList">{{item.name}}个数<span style="color: #ff0000">{{item.size}}</span>个</p>
        </div>
        <div>
        <h2>规则导入导出</h2>
          <div>
      <select v-model="outRuleSelect">
      <option v-for="(item,key) in outRUleModelList":value="key">{{item}}</option>
    </select>
    <button @click="outRule">导出</button>
    </div>
    <div>
      <select v-model="inputRuleSelect">
      <option  v-for="item in inoutRUleModelList" :value="item">{{item}}</option>
    </select>
    <button @click="inputRule">导入</button>
    </div><textarea v-model.trim="inputEditContent" placeholder="请填导入的规则内容" style="height: 300px; width: 100%; font-size: 14px;" v-show="isInputEditShow"></textarea></div>
    </div>
    </div>
            `);
    }
}